<template>
    <el-dialog
      v-model="dialogShow"
      destroy-on-close
      append-to-body
      :fullscreen="p.isfullScreen"
      :width="p.isfullScreen ? '100%' : p.width"
      :style="p.isfullScreen ? '' : 'height:' + p.height"
      style="background-color:'#122E5D';"
      :title="p.title"
      draggable
      @before-close="dialogShow = false"
    >
        <ul >
          <li>
            1#水阀:
            <el-switch
            v-model="sfList[0].nodeValue"
            class="ml-2"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
          />
          </li>
          <li>
            2#水阀:
            <el-switch
            v-model="sfList[1].nodeValue"
            class="ml-2"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
          />
          </li>
          <li>
            3#水阀:
            <el-switch
            v-model="sfList[2].nodeValue"
            class="ml-2"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
          />
          </li>
          <li>
            4#水阀:
            <el-switch
            v-model="sfList[3].nodeValue"
            class="ml-2"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
          />
          </li>

        </ul>
    </el-dialog>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive, defineExpose, defineProps, nextTick ,inject } from "vue";
  import {ISvgDataLists, ISvgCanvas, IComponentInfo, ISelectSvg} from "../../Model";
  import axios from "axios";
  import { forEach } from "lodash";
  const mqtt: any = inject('$m')
  const sfList=[{nodeKey:'',nodeValue:1},{nodeKey:'',nodeValue:1},{nodeKey:'',nodeValue:1},{nodeKey:'',nodeValue:1}]
  const p = defineProps({
    title: {
      type: String,
      default: "弹窗标题",
    },
    paramSet: {
      type: Object,
      default: {},
    },
    width: {
      type: String,
      default: "40%",
    },
    height: {
      type: String,
      default: "60%",
    },
    isfullScreen: {
      type: Boolean,
      default: false,
    },
    svg_data: {
    type: Array as () => Array<ISvgDataLists>,
    required: true,
    default: [],
  },
  });
  let dialogShow = ref(false);
  const openDialog = () => {
    dialogShow.value = true;
  };
  defineExpose({ openDialog });
  </script>
  
  <style lang="scss" scoped>
  .parameterInfo {
    width: 60%;
    margin: auto;
    font-size: 20px;
    font-weight: 600;
  }
  .parameterVal{
    width: 100%;
    background-color: #2daeff25;
    text-align: center;
    border-radius: 10px;
    border: 1px solid #52bcff;
    box-shadow: 0 0 15px #52bcff;
    padding: 5px 0;
  }
  </style>
  
  <style lang="scss">
  .el-row {
    justify-content: space-around;
    align-items: center;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }
  
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
  .el-dialog.is-draggable .el-dialog__header{
    width: calc(100% - 40px);
    background-color: #09162dfa;
    padding-bottom: 20px;
  }
  .el-dialog__title{
    color: #fff;
    font-size: 60px;
    font-weight: 800;
    text-shadow: 0px 0px 20px #2daeff;
    font-style: italic;
  }
  .el-dialog__header{
    height: 80px;
  }
  .el-dialog__body{
    // background-color: #0b2d63e8;
    height: calc(100% - 80px);
    background-color: #09162dfa;
    color: #fff;
    text-align: center;
    ul{
      height: 100%;
      li{
        padding:10px;
        font-size: 30px;
        height: 20%;
        list-style: none;
      }
    }
  }
  .el-dialog__headerbtn{
    font-size: 30px;
  }
  </style>